<template>
  <div class="h-screen flex flex-col relative overflow-scroll">
    <!-- 视频播放区域 -->
    <section
      class="w-full relative h-1/3 flex-shrink-0"
      :class="isPortrait ? 'z-0' : 'z-20'"
    >
      <lazy-video
        :video-src="videoUrl"
        :poster="videoPoster"
        :autoplay="true"
        :is-portrait="isPortrait"
        class="w-full h-full"
      />
    </section>

    <!-- 课题互动/答题区域：横屏时用tab切换 -->
    <section
      v-if="!isPortrait && courseData"
      class="bg-gray-100 rounded-t-lg p-4 transition-all duration-300 z-10 flex-1"
    >
      <van-tabs
        v-model:active="activeTab"
        class="bg-gray-100 rounded-t-lg h-full flex flex-col"
      >
        <van-tab title="直播互动" name="interaction" class="h-full">
          <Interaction :is-interaction-enabled="isInteractionEnabled" />
        </van-tab>
        <van-tab
          title="答题"
          name="question"
          v-if="courseData?.question.questions.length > 0"
        >
          <Question />
        </van-tab>
      </van-tabs>
    </section>
    <Interaction
      v-else-if="courseData && isPortrait"
      :styleMode="'cover'"
      :is-interaction-enabled="isInteractionEnabled"
    />
    <InteractionMenu
      v-if="!playerStore.isFullScreen"
      class="fixed bottom-20 right-1 z-50"
      :style-mode="isPortrait ? 'cover' : ''"
    ></InteractionMenu>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, watch } from "vue";
import LazyVideo from "@/components/lazy-video/index.vue"; // 确保路径正确
import Interaction from "@/components/Interaction.vue"; // 使用封装的互动组件
import "@/utils/tencent-im";
import { useCourseData, useQuestion } from "@/store/useLiveCourse";
import { usePlayerStore } from "@/store/usePlayer";
import router from "@/router";
import { useRoute } from "vue-router";
import Question from "./Question.vue";
const { courseData } = useCourseData();
// 视频地址和封面图
// const videoUrl = ref("./test.mp4"); // 替换为实际视频地址
const videoUrl = ref(courseData.streamAddress); // 替换为实际视频地址
// 当transcribe的hasTranscribe为1时，且streamEndTime小于当前时间且transcribe的openEndTime大于当前时间时，使用recordedVideo.link
if (
  courseData.transcribe.openType !== 0 &&
  new Date(courseData.transcribe.openStartTime).getTime() <=
    new Date().getTime()
) {
  videoUrl.value = courseData.recordedVideo.link;
}
// const videoUrl = ref("https://eolive.liveyunbo.cn/vod2Live/34ss5dddd99.m3u8"); // 替换为实际视频地址

const videoPoster = ref("https://example.com/poster.jpg"); // 替换为实际封面图地址

// 是否为竖屏模式
// const isPortrait = ref(false); // 根据实际逻辑动态设置
const playerStore = usePlayerStore();
const isPortrait = computed(() => courseData.screenType === 0);
const isInteractionEnabled = computed(() => courseData.openInteraction === 1);
const activeTab = ref("interaction");
const questionStore = useQuestion();
watch(
  () => questionStore.isVisible,
  newVal => {
    if (newVal) {
      activeTab.value = "question";
    } else {
      activeTab.value = "interaction";
    }
  }
);
const route = useRoute();
watch(
  () => questionStore.isVisible,
  newVal => {
    if (newVal) {
      activeTab.value = "question";
    } else {
      activeTab.value = "interaction";
    }
  }
);
if (!route.query.isReplay) {
  watch(
    () => playerStore.maxProgress,
    nv => {
      // 如果到达courseData.value.streamEndTime，则显示直播结束
      if (
        new Date(courseData.streamEndTime).getTime() <= new Date().getTime()
      ) {
        router.replace({
          name: "LiveEnd",
          query: {
            ...route.query,
            roomId: courseData.roomId
          }
        });
      }
      if (
        courseData.transcribe.openType !== 0 &&
        new Date(courseData.transcribe.openStartTime).getTime() <=
          new Date().getTime()
      ) {
        router.replace({
          name: "LiveEnd",
          query: {
            ...route.query,
            roomId: courseData.roomId
          }
        });
      }
    }
  );
}
watch(
  () => playerStore.isPlayerEnd,
  nv => {
    // 如果到达courseData.value.streamEndTime，则显示直播结束
    if (nv) {
      router.replace({
        name: "LiveEnd",
        query: {
          ...route.query,
          roomId: courseData.roomId
        }
      });
    }
  }
);
</script>
<style scoped lang="less">
:deep(.van-tabs__content) {
  flex-grow: 1;
}
</style>
